<template>
  <div class="index-page">
    <pageHead
      title="奖金明细"
      class="fixed"
    ></pageHead>
    <main>
      <ul>
        <li>
          <div class="view">
            <div class="num">
              2018.04.27 12:54<span>ID：43285</span>
            </div>
            <div class="info clearfix">
              <p class="fl">分类：提供帮助</p>
              <p class="fr">类别：排单币</p>
              <p class="fl">内容：消耗排单币</p>
              <p class="fr money">金额：<span>-20.00</span></p>
              <p class="fl">余额：￥2000</p>
            </div>
          </div>
        </li>
        <li class="on">
          <div class="view">
            <div class="num">
              2018.04.27 12:54<span>ID：43285</span>
            </div>
            <div class="info clearfix">
              <p class="fl">分类：提供帮助</p>
              <p class="fr">类别：排单币</p>
              <p class="fl">内容：消耗排单币</p>
              <p class="fr money">金额：<span>+20.00</span></p>
              <p class="fl">余额：￥2000</p>
            </div>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
import pageHead from '@/components/include/header'
export default {
  components: { pageHead },
  data () {
    return {}
  },
  mounted: function () {},
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #f3f3f3;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9;
  }
  main {
    margin-top: 0.88rem;
    li {
      background: #fff;
      padding-top: 0.3rem;
      margin-top: 0.1rem;
      padding-bottom: 0.3rem;
      .view {
        width: 6.9rem;
        margin-left: auto;
        margin-right: auto;
        .num {
          font-size: 0.24rem;
          color: #a0a0a0;
          span {
            margin-left: 0.55rem;
          }
        }
        .info {
          p {
            font-size: 0.26rem;
            color: #313131;
            width: 50%;
            margin-top: 0.2rem;
            &.spare {
              font-size: 0.3rem;
            }
            &.fr {
              text-align: right;
            }
            &.money {
              span {
                color: #ffba4c;
              }
            }
          }
        }
      }
      &.on {
        .info {
          p {
            &.money {
              span {
                color: #ff0000;
              }
            }
          }
        }
      }
    }
  }
}
</style>
